Introduction to Visual Shading Language

Welcome to Visual Shading Language (VSL)

VSL provides you with power equal to programming languages. It allows you to define very advanced material effects, such as procedural bump maps, anisotropic lighting effects or light radiation that makes the target object transparent!

Despite the fact that VSL is actually a programming language, you don't have to be a programmer in order to use it. Thanks to an easy-to-use drag&drop interface, most of the power of VSL is accessible to users with no programming background.

This tutorial shows you how to get started in creating fancy material effects with VSL.

Tutorial level: Beginner

Constant red

In this example we will create a material which turns the surface red.

1. First we need a new VSL material. To create one, switch to the 'Materials' tab in the select window, open the pop-up menu by clicking the right mouse button, and pick New/VSL material from the list.

Create a new VSL material

A new 'black' icon is created into the material tab with the default 'MaterialX' name. If 'Show Previews' option is off (you can check it from the select window's popup menu), you will find the new material at the end of the material name list. Slowly double click the new material icon to activate the rename tool. Enter the new name 'ConstantRed' and press Enter.

A new 'empty' material is inserted into the material tab of the select window.

2. Double click the new 'black' material icon and the property window is opened. The created material does not define any material properties. Therefore, its property window is empty.

A material with no material properties

3. Check the Advanced check box in the top left edge of the material property window. This opens the actual VSL editor.

The VSL editor

4. Click the 'VSL Objects' button (the small + sign). This shows you the VSL objects, which you can use to define material properties.

Available VSL objects

5. Our goal was to create a material, which simply turns surfaces red. This means that we want to define the surface properties of objects. Drag the 'Shader' icon from the 'Available Objects' and drop it over the 'Material' node appearing at the top part of the window. Note how the mouse pointer changes to indicate when dropping is allowed. This creates a new node to the VSL tree. The new node has the name 'Surface properties' and is automatically selected, as the highlighting of the name indicates.

Drag and drop the' Shader' icon into the 'Material' node.

Look at the lower part of the VSL editor. It always shows the properties of the selected VSL object. The current selected object, 'Shader', has only one property, 'Type', which is by default 'Surface properties'. Click the right side of the 'Type' gadget to open the whole list of available types; it includes names such as 'Light properties', 'Volume illumination', and so on. Many of the shader types are easy to understand from the short but descriptive name. If you want to make an object red, you need a 'Surface properties' shader, because 'red color ' is a property of the surface (red paint, etc.). If you want to define how fog reacts in light, you need a 'Volume illumination' shader. Makes sense, doesn't it?

The default type 'Surface properties' is exactly what we need, so do not change it, just close the type list by clicking the right side of the gadget again. 'Surface properties' is the most frequently used shader, and that is why it is the default type for all newly created shaders.

5. Drag & drop the 'Constant' icon from the 'Available Objects' box inside the 'Surface properties' node. Again, a new node is inserted into the VSL tree.

Drop a 'Constant' object to 'Surface properties'

6. The new Constant node is again selected, and the lower part of the window shows you its properties. The default color value is black. Click the small sample color square and change the color to red.

Surface color set to red

7. Check the 'Preview' button to update the icon in the material select tab and to view the effect of the material.

Your first VSL material is now ready. 
 

Next we modify the 'ConstantRed' material slightly.

In the example above, we used a VSL object 'Color=Constant(1,0,0)' to achieve a red surface. To be exact, we defined such a property that makes an object appear red when ordinary white light illuminates it. This property is called the diffuse color of an object, and it has a very strong impact for the appearance of most real world objects and materials (cloth, paper, matte-like surfaces in general). Theoretically, diffuse color describes how much and in which color tiny irregularities and bumps of a surface scatter light around.

Diffuse color alone is not sufficient when we try to simulate real world materials and surfaces. Another well-known property, which describes what happens when light hits a surface, is the amount of mirror-like reflection. We will experiment with this next;

Using the previous material, make sure that the 'Constant' VSL object in the material hierarchy is selected (its name is highlighted). Move the mouse pointer over the area, which shows the VSL structure of the material, and open the popup menu using the right mouse button. Open the 'Output' sub menu. It includes a long list of items: 'Surface:Alpha', 'Surface:Color', and so on. Select 'Surface:Reflection' from the list.

Selecting the output channel for a 'Constant' VSL object

The long menu list shows the properties, which describe the type of the surface: the amount of diffuse color, reflection, transparency, etc. Such properties are called Channels in Realsoft 3D. You can control the appearance of a material by writing desired values to suitable channels, just like we did above (first diffuse color and now mirror reflection).

Some of the channels have names that may look hard to understand: 'UV coords', 'Map Z', for example. These channels contain information computed by the rendering engine and they are made available for the user so that he/she can find out what is going on during the rendering and ultimately, customize all the rendering actions.

Let's stop the theoretical considerations and continue the tutorial. The 'Constant' VSL object now defines the amount and color of mirror reflection. Consequently, the preview window shows the material again white, except that there may be some red reflections visible. All objects have white diffuse color by default. Thanks to this, we can see newly created objects in rendering without a need to define colors for them. Nothing in the VSL structure constructed so far changes this default setting, and therefore the diffuse color is white again.

Red reflections and white diffuse color

The reflections look strange, because the floor below is white and blue, but reflections show it red. Anyway, this is what we defined: the color value of the constant object is still red from the first VSL tutorial. As a matter of fact, although this is an unusual effect, even stranger phenomena occur in real world materials. Therefore, it is important that we have the freedom to implement the wildest imaginable shading effects using VSL.

Next we build a bit more complex material: glass. There is a glass like material available in the material library, but it is useful to learn how such a material is defined step by step.

1. Select 'New\VSL material' from the select window's popup menu and rename the created blank material as 'Glass'. Open the property window unless already opened. The newly created material is automatically selected. The 'Advanced' and 'Preview' options should also be set from the previous example; if not, activate them.
   
   
2. The first step is the same as in 'ConstantRed': drop a 'Shader' from available VSL objects into the root level 'material' node. Most glass properties can be defined in 'Surface properties', and therefore we do not have to change the default type of the shader.

 
The starting point

So far, the material has only the default properties: white diffuse color, thanks to which we can see the preview sphere. In the image above, the simple preview sphere has a blue and white checker floor below it. This makes it easier to see how the material will interact with the environment. The preview project is fully customizable and can be changed (see the material preview tutorial for details)

3. Drop a 'Constant' object from the available objects into 'Surface properties'. The constant object is inserted, assigning the constant black value to the (diffuse) color channel. Consequently, the preview turns black. This is what we want, because the surface of glass is so smooth that it does not scatter light randomly around but lets it through and reflects it in certain exact angles. Keep in mind that random scattering is the source of matte-like diffuse shading.


Black diffuse color

4. Drop another 'Constant' object into the 'Surface properties' shader. Open the popup, and change the 'Output' channel to 'Surface:Transparency'. Changing the output channel was explained in the 'Red reflections' example above. Nothing happens yet, because the constant transparency value is still black. Change it to white (1 1 1) using the gadget on the bottom of the VSL editor. The preview sphere disappears.


Fully transparent sphere

5. This kind of material is very boring, because applying it to an object is almost the same as deleting the object - nothing remains visible. The material lacks an important property of real glass, namely the ability to refract light. Let's fix this. Drop a new constant object to surface properties and change the output to 'Surface:Optical thickness'. The default thickness is zero - the thickness of empty space. Change the value of constant object to 0.5 using the gadget at the bottom of the property window. Note that optical thickness is defined by a single value, whereas color has three components: red, green and blue. The constant object automatically changes its value gadget to match the 'sub channel dimension' of the output channel.

Note: you can compute the refraction factor from the optical thickness value using the simple formula

Refraction index = 1/(1-thickness)

Assigning the value 0.5 gives refraction index = 1/(1-0.5) = 2. The material mimics real glass in this respect. Note that as you become familiar with VSL, you can easily build a material, which uses the preferred way of measuring the refraction.

The preview window changes, but you may not see any refraction yet. The preview window is actually a small view window and you can rotate, pan and zoom around just like in normal view windows. Move the mouse over the preview window, press Alt key down and drag with the right mouse button to rotate the view upwards. At certain angles, the refraction of the blue floor becomes visible. It is quite extreme, because the 'glass lens' here is fully spherical. Think about eyeglasses with spherical lenses - certainly hard to wear and they turn the world upside down.


Refracting glass

The material now looks like glass, but we can still improve it.
You have probably noticed that all real world glass objects not only refract light but also reflect it. The mirror reflection is sometimes weak, but it exists. The previous example already showed how to make an object reflective. This time we will define the amount of reflection in an advanced manner: reflection should depend on the viewing angle towards the surface. The smaller the angle becomes, the more reflection appears (which happens in the real world as well).

6. Drop a 'Curve' object from 'Available Objects' into Surface properties. The preview turns funny because the default settings are all wrong. Open the popup menu and change 'Output' to 'Surface:Reflection'. Open the popup again. There is one new entry, 'Input 0'. The 'Curve' VSL object computes values to the output channel by applying a user drawn curve function to values read from an input channel. Set 'Input 0' to 'Surface: Ray*Normal'. This channel is maintained by the ray tracer and measures exactly the property we want: how perpendicular the ray from the camera is to the surface. The range is from -1 to 1, the middle value zero being the case when rays travel along the surface (perpendicular to the surface normal).


Reflection defined by viewing angle

7. The curve gadget at the bottom of the property window shows a straight line ascending from zero to one. Move the mouse pointer over the curve and open the popup menu. Select 'Set Minimum and Maximum values' from it. Change the 'MinX' from zero to -1, hit Enter and close the window. Now the curve covers the whole range of possible 'Surface:Ray*Normal' values.
   
   
8. Edit the curve shape so that the maximum height is in the middle (see the picture below). You can select existing points by clicking them or with a drag box the same way as when editing geometric objects. To add a new point, simply drag the curve from a point holding the left mouse button down. You can delete the unnecessary points using the 'Delete' function from the popup menu. Note that there are actually three curves, but edit them all to a same shape, because we do not want color distortions this time - white should look white in reflections. The the start and end values of the curve can be slightly above zero, which makes the surface reflective everywhere.

   
   The curve that defines reflection

   Now the reflection is ready, but you may not see much change in the simple preview scene in the small window. Nevertheless, this kind of subtle detail is important when building truly photorealistic scenes.

   The final step is adding some shine to our glass.

9. Drop a 'Shader' object to the 'Material' node. Change the 'Type' from Surface properties to 'Surface illumination'.


Surface illumination shader added

10. Drop a 'Specular' object to the 'Surface illumination' shader. Take a look at the inserted 'Specular' object: It uses the 'Color' channel as an input the same way as the curve object above uses 'Ray*Normal'. Usually this works fine, but now the color is set to black (the first 'Constant' assignment in surface properties) and therefore the default input does not work in this case.
    
    
11. Drop a 'Variable' object on top of the 'Specular' node in the VSL structure. Wait until the mouse pointer shows an 'up' arrow indicating that the new object will be inserted before the specular object. If the 'Variable' object was added after 'Specular', you can drag and drop it into a new position in the VSL hierarchy; just watch the mouse cursor when dropping to find out the correct end position. Actually variables can be inserted anywhere in the hierarchy and they are equally visible within the parent level, but declaring variables in the beginning of the level makes VSL code more readable.
    
    
12. Using the property controls of 'Variable', change its name to 'SpecularColor', set the 'Initialize' checkbox and define a value 1,1,1 to the 'Initial Value' gadget.
    
    
13. Click the 'Specular' object in the VSL tree to activate it. Open the popup menu and change 'Input 0' from 'Color' to 'SpecularColor'. Now the specular object uses white color defined by the 'SpecularColor' variable to compute the highlights. You can see this in the preview window. Adjust the sharpness and brightness values of the 'Specular' object until the highlights are suitable. The glass material is now ready.

    
     Glass with specular highlights